<template>
  <div ref="listRef">
    <div class="advice">小编推荐</div>
    <el-row :gutter="24" class="list">
      <el-col :span="num" v-for="advice in adviceList" :key="advice.id" @click="getDetail(advice)">
        <div class="list-item" @click="getDetail(advice)" style="margin-top: 5px">
          <img class="imgList" :src="advice.url" alt="暂无"/>
          <h5 style="width: 100px">{{ advice.name }}</h5>
        </div>
      </el-col>
    </el-row>
    <br>
    <div class="subKind">分类</div>
    <div class="kind">
      <div>
      <span :class="typeIndex === index?'active':'kind'"
            v-for="(type,index) in kindList.type"
            @click="changeType(index)"
            :key="index">{{ type }}</span>
      </div>
      <div class="padding">
      <span :class="kindIndex === index?'active':'kind'"
            v-for="(kind,index) in kindList.kind"
            @click="changeKind(index)"
            :key="index">{{ kind }}</span>
      </div>
    </div>
    <el-row :gutter="24" class="list">
      <el-col :span="num" v-for="book in bookList" :key="book.id">
        <div class="list-item" @click="getDetail(book)">
          <img class="imgList" :src="book.url" alt="暂无"/>
          <h5 style="width: 140px">{{ book.name }}</h5>
        </div>
      </el-col>
      <div class="yy">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size=12
                       style="text-align: center"
                       :current-page="this.currentPage" @current-change="setCurrentPage">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "first",
  props: {
    input1: String
  },
  data() {
    return {
      adviceList: [],
      typeIndex: 0,
      kindIndex: 0,
      kindList: [],
      bookList: [],
      num: 1,
      total: 0,
      currentPage: 1
    }
  },
  created() {
    this.getKind();
    this.getAdviceList();
  },
  mounted() {
    this.getBookList();
    let that = this
    window.onresize = () => {
      return (() => {
        let n = Math.floor(this.$refs.listRef.scrollWidth / 170);
        that.num = Math.floor(24 / n);
      })()
    }
  },
  methods: {
    getAdviceList() {
      this.$axios.get("/book-message/advice").then(res => {
        if (res.data.code === '200') {
          this.adviceList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    changeKind(index) {
      this.kindIndex = index;
      this.getBookList();
    },
    changeType(index) {
      this.typeIndex = index;
      this.getBookList();
    },
    getKind() {
      this.$axios.get("/book-message/kind/list").then(res => {
        if (res.data.code === '200') {
          this.kindList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    getDetail(book) {
      this.$router.push({path: "/book/detail", query: {id: book.id}})
    },
    getBookList() {
      let type = this.typeIndex === 0 ? null : this.typeIndex === null ? null : this.kindList.type[this.typeIndex];
      let kind = this.kindIndex === 0 ? null : this.kindIndex === null ? null : this.kindList.kind[this.kindIndex];
      this.$axios.post("/book-message/page", {
        currentPage: this.currentPage,
        totalPage: 12,
        type: type,
        kind: kind
      }).then(res => {
        if (res.data.code === '200') {
          this.bookList = res.data.data;
          this.total = res.data.total;
          let n = Math.floor(this.$refs.listRef.scrollWidth / 170);
          this.num = Math.floor(24 / n)
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    setCurrentPage(param) {
      this.currentPage = param;
      this.getBookList();
    },
  }
}
</script>

<style scoped>
.advice {
  height: 35px;
  background-color: #666666;
  color: white;
  padding-left: 15px;
}

.active {
  background-color: #666666;
  color: yellow;
  margin-left: 15px;
}

.kind {
  background-color: #666666;
  color: #EEEEEE;
  margin-top: 5px
}

.list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: center;
  flex-wrap: wrap;
  height: 160px;
  width: 100%;

}

span {
  margin-left: 15px;
}

span:hover {
  margin-left: 15px;
  color: lightblue;
}

.padding {
  padding-top: 10px;
}

.imgList {
  width: 90px;
  height: 100px;
}

.list-item {
  border: #2c3e50 solid 1px;
  margin-top: 20px;
  padding-top: 10px;
  width: 140px;
  height: 140px;
  display: flex;
  background-color: whitesmoke;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.el-pagination {
  text-align: center;
}

.yy {
  position: fixed;
  bottom: 70px;
  right: 50%;
  transform: translateX(50%);
  text-align: center
}

.subKind {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  padding-left: 15px;
  border-bottom: #999999 solid 1px;
}
</style>
